<template>
  <div class="app-apge">
    <div class="canvas" ref="canvas"></div>
    <div id="js-properties-panel" class="panel"></div>
    <el-dialog
      :visible.sync="visible"
      width="500px"
      :before-close="close">
      <div>节点id: {{ bpmnNodeInfo.id }}</div>
      <div>节点type: {{ bpmnNodeInfo.type }}</div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
// 引入相关的依赖
import CustomModler from './customModeler'
import { xmlStr } from '@/assets/xmlStr'

import customModule from './custom'
export default {
  name: 'BpmnTest1',
  data () {
    return {
      // bpmn建模器
      bpmnModeler: null,
      container: null,
      canvas: null
    }
  },
  computed: {
    ...mapState({ // 解构
      bpmnNodeInfo: state => state.bpmn.nodeInfo,
      visible: state => state.bpmn.nodeVisible
    })
  },
  methods: {
    ...mapMutations(['TOGGLENODEVISIBLE']),
    close () {
      this.TOGGLENODEVISIBLE(false)
    },
    init () {
      // 获取到属性ref为“canvas”的dom节点
      const canvas = this.$refs.canvas
      // 建模
      this.bpmnModeler = new CustomModler({
        container: canvas,
        // 添加控制板
        propertiesPanel: {
          parent: '#js-properties-panel'
        },
        additionalModules: [
          // 自定义节点
          customModule
        ]
      })
      this.createNewDiagram()
    },
    // 渲染一个新的流程图
    async createNewDiagram () {
      try {
        await this.bpmnModeler.importXML(xmlStr)
      } catch (error) {
        console.log(error.message, error.warnings)
      }
    },
    success () {
      console.log('创建成功!')
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style lang="scss">
.canvas {
  width: 100%;
  height: 100%;
}
.panel{
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
}
.bjs-powered-by{
  display: none !important;
}
</style>
